<template>
  <div class="register-container">
    <!-- PC 端 (Element Plus) -->
    <el-card v-if="isDesktop" class="register-form">
      <h2 style="text-align: center;margin: 20px 0;">注册账号</h2>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="学号" prop="stuNum">
          <el-input v-model="form.stuNum" />
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="用户名" prop="realName">
          <el-input v-model="form.realName" />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="班级" prop="className">
          <el-input v-model="form.className" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" show-password />
        </el-form-item>

        <el-button type="primary" @click="onSubmit" class="submit-btn">注册</el-button>
        <router-link to="/login"><el-button type="success" style="margin-left: 0;" class="submit-btn">去登陆</el-button></router-link>
      </el-form>
    </el-card>

    <!-- 移动端 (Vant) -->
    <van-cell-group v-else class="register-form-mobile">
      <h2 class="mobile-title">注册账号</h2>
      <van-field v-model="form.stuNum" label="学号" placeholder="请输入学号" :rules="[{ required: true, message: '学号不能为空' }]" />
      <van-field v-model="form.username" label="账号" placeholder="请输入账号" :rules="[{ required: true, message: '账号不能为空' }]" />

      <van-field v-model="form.email" label="邮箱" placeholder="请输入邮箱" :rules="[{ required: true, message: '邮箱不能为空', pattern: emailRegex }]" />

      <van-field v-model="form.realName" label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '用户名不能为空', pattern: emailRegex }]" />
      
      <van-field v-model="form.age" label="年龄" placeholder="请输入年龄" :rules="[{ required: true, message: '年龄不能为空', pattern: emailRegex }]" />

      <van-field v-model="form.className" label="班级" placeholder="请输入班级" :rules="[{ required: true, message: '班级不能为空', pattern: emailRegex }]" />

      <van-field v-model="form.password" type="password" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '密码不能为空' }]" />

      <van-field v-model="form.confirmPassword" type="password" label="确认密码" placeholder="请再次输入密码" :rules="[{ validator: validateConfirmPassword, message: '两次密码不一致' }]" />

      <van-button block type="primary" @click="onSubmit" class="submit-btn-mobile">注册</van-button>
      <router-link to="/login"><van-button block type="success" class="submit-btn-mobile">去登陆</van-button></router-link>
    </van-cell-group>
  </div>
</template>

<script setup >
import { ref, computed } from 'vue'
import { useMediaQuery } from '@vueuse/core'
import { reg } from '@/utils/request'
import { ElMessage } from 'element-plus'

const form = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  age:'',
  realName:'',
  stuNum:'',
  className:''
})

const isDesktop = useMediaQuery('(min-width: 768px)')
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

// const validateConfirmPassword = (value: string) => {
//   return value === form.value.password
// }

// Element Plus 表单验证规则
const rules = {
  username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  stuNum: [{ required: true, message: '学号不能为空', trigger: 'blur' }],
  className: [{ required: true, message: '班级不能为空', trigger: 'blur' }],
  age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
  realName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { pattern: emailRegex, message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  // confirmPassword: [
  //   { required: true, message: '请确认密码', trigger: 'blur' },
  //   { validator: (_, value, callback) => {
  //       if (value !== form.value.password) {
  //         callback(new Error('两次密码不一致'))
  //       } else {
  //         callback()
  //       }
  //     }, trigger: 'blur' }
  // ]
}

const onSubmit = async () => {
  const r = await reg({
    username: form.value.username,
    email: form.value.email,
    pwd: form.value.password,
    age: form.value.age,
    realName: form.value.realName,
    stuNum: form.value.stuNum,
    className: form.value.className
  });
  console.log('提交数据:', r)
  if(r){
    ElMessage.success('注册成功')
  }else{
    ElMessage.error('注册失败')
  }
  // if (isDesktop.value) {
  //   // 处理 Element Plus 表单提交逻辑
  // console.log('提交数据:', form.value)
  // } else {
  //   console.log('提交数据:', form.value)
  // }
}


</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.register-form {
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.submit-btn {
  width: 100%;
  margin-top: 10px;
}

/* 移动端样式 */
.register-form-mobile {
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.mobile-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.submit-btn-mobile {
  margin-top: 20px;
}
</style>